fix(react): remove false ellipsis when text fits in Chrome#2206
fix(react): remove false ellipsis when text fits in Chrome#2206maksym-shynkarenko merged 1 commit intodevelopfrom
Conversation
There was a problem hiding this comment.
Pull request overview
This PR fixes a Chrome rendering bug where the TextEllipsis component incorrectly displayed ellipsis even when text fit within the specified maxLines. The solution moves -webkit-line-clamp application from static props to dynamic management within the ResizeObserver, measuring actual overflow and conditionally removing the property when no overflow exists.
Changes:
- Removed static
-webkit-line-clampapplication from component props - Implemented dynamic
-webkit-line-clampmanagement inResizeObservercallback - Added
maxLinesto useEffect dependency array
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
This pull request is automatically being deployed by Amplify Hosting (learn more). |
Bracciata
left a comment
Bracciata
left a comment
There was a problem hiding this comment.
This looks good to me!
Zidious
left a comment
Zidious
left a comment
There was a problem hiding this comment.
This PR references closing https://github.com/dequelabs/walnut/issues/13260 but this fix seems unrelated to that, am I incorrect in thinking that?
yeah, sorry, the wrong PR for that ticket, wil lremove it from PR description |
maksym-shynkarenko
force-pushed
the
fix-TextEllipsis-tooltip
branch
from
2f2b9a2 to
6c1e7c1
Compare
maksym-shynkarenko
dismissed
Zidious’s stale review
Applied the solution .TextEllipsis:not(.TextEllipsis--multiline):after
Zidious
left a comment
Zidious
left a comment
There was a problem hiding this comment.
LGTM - we'll want final 👀 from @anastasialanz
|
I made an issue to add screenshots for this component. |
5 participants
Problem
Chrome incorrectly displayed ellipsis ("...") for
TextEllipsiscomponent withmaxLinesprop, even when text fit within the specified number of lines. This was particularly noticeable with short text usingmaxLines={2}or higher.Root Cause
The
.TextEllipsis:afterpseudo-element withdisplay: block(added in #1926 as a Safari workaround) caused Chrome to miscalculate overflow when combined with-webkit-line-clampin multiline mode.Solution
Changed the CSS selector from
.TextEllipsis:afterto.TextEllipsis:not(.TextEllipsis--multiline):afterto apply the Safari workaround only to single-line ellipsis. This prevents the Chrome rendering bug while preserving the original Safari fix.Result
Video
Video: fix in Chrome and Safari
Screen.Recording.2026-02-03.at.16.08.25.1.mov
Video: responsiveness
Screen.Recording.2026-01-19.at.19.48.14.mov
Closes: Walnut #13167